import React, { Component } from 'react'
import { Text, StyleSheet, View ,
    TouchableHighlight,
    TouchableOpacity,
    TouchableWithoutFeedback,
} from 'react-native'

export default class Touchables extends Component {
  render() {
    return (
      <View style={[styles.Component]}>
        <TouchableHighlight
            onPress={() => alert('Pressed')}
        >
            <View style={[styles.item]}>
                <Text> TouchableHighlight </Text>
            </View>
        </TouchableHighlight>
        <TouchableOpacity
            onPress={() => alert('Pressed')}
        >
            <View style={[styles.item]}>
                <Text> TouchableOpacity </Text>
            </View>
        </TouchableOpacity>
        <TouchableWithoutFeedback
            onPress={() => alert('Pressed')}
        >
            <View style={[styles.item]}>
                <Text> TouchableWithoutFeedback </Text>
            </View>
        </TouchableWithoutFeedback>
      </View>
    )
  }
}

const styles = StyleSheet.create({
    Component:{
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    },
    item:{
        marginBottom: 20,
        padding: 10,
        borderWidth: 1,
        borderColor: 'red',
    }
})
